<template>
  <div>
    <!--添加ref属性是为了来获取表单组件 v-form有两个默认方法reset和validate-->
    <v-form v-model="valid" ref="myBrandForm">
      <v-text-field label="请输入品牌名称" v-model="brand.name" required :rules="nameRules"/>
      <v-text-field label="请输入品牌首字母" v-model="brand.letter" required :rules="letterRules"/>
      <!--multiple：是否多选  url:加载商品分类的接口路径-->
      <v-cascader
        url="/item/category/list"
        multiple
        required
        v-model="brand.categories"
        label="请选择商品分类"/>
      <!--文件上传组件 layout添加了row属性，代表这是一行，如果是column，代表是多行-->
      <v-layout row>
        <v-flex xs3>
          <span style="font-size: 16px; color: #444">品牌LOGO：</span>
        </v-flex>
        <v-flex>
          <!--url：上传的路径  v-model：将上传的结果绑定到brand的image属性  multiple：是否运行多图片上传-->
          <v-upload
            v-model="brand.image"
            url="/upload/image"
            :multiple="false"
            :pic-width="250"
            :pic-height="90"/>
        </v-flex>
      </v-layout>
      <!--提交和重置按钮-->
      <v-layout class="my-4" row>
        <v-flex xs3></v-flex>
        <v-btn @click="submit" color="primary">提交</v-btn>
        <v-btn @click="clear" color="warning">重置</v-btn>
      </v-layout>
    </v-form>
  </div>
</template>

<script>
  export default {
    name: "MyBrandForm",
    //子组件接受父组件传递过来的复杂数据，即对象数据
    props:{
      oldBrand:{
        type:Object
      },
      isEdit:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        valid: false, //表单验证标记，默认为false，校验通过自动变为true
        brand: {
          name: '',//品牌名称
          letter: '',//品牌首字母
          categories: [],//品牌分类信息
          image: ''//品牌logo
        },
        nameRules:[
          v => !!v || "品牌名称不能为空",
          v => v.length > 1 || "品牌名称至少是2位",
          v => v.length < 16 || "品牌名称至多是15位"
        ],
        letterRules:[
          v => !!v || "品牌首字母不能位空",
          v => /^[A-Z]{1}$/.test(v) || "品牌首字母只能是A~Z的大写字母"
        ]
      }
    },
    methods: {
      submit() {
        //先进行表单校验
        if (this.$refs.myBrandForm.validate()) {
          // 2、定义一个请求参数对象params，通过解构表达式来获取brand中的属性，
          //    category和letter需要单独处理，故独立出来，其他参数封装到params中
          const {categories ,letter ,...params} = this.brand;
          // 3、数据库中只要保存分类的id即可，因此我们对categories的值进行处理,只保留id，并转为字符串
          params.cids = categories.map(c => c.id).join(",");
          // 4、将字母都处理为大写
          params.letter = letter.toUpperCase();
          // 5、将数据提交到后台,通过isEdit的状态来确定是新增还是修改
          this.$http({
            method:this.isEdit?'put':'post',//动态判断是put请求还是post请求
            url:"/item/brand",
            //用QS工具将json格式的请求数据转换成QueryString形式的
            data:this.$qs.stringify(params)
          }).then(() => {
              // 6、弹出提示
              this.$message.success("保存成功！");
              this.$emit("close");
            })
            .catch(() => {
              this.$message.error("保存失败！");
            });
        }
      },
      clear() {
        //重置表单
        this.$refs.myBrandForm.reset();
        //需要手动清空分类信息
        this.brand.categorys = []
      }
    },
    watch: {
      oldBrand: {// 监控oldBrand的变化
        handler(val) {
          if(val){
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand =  Object.deepCopy(val)
          }else{
            // 为空，初始化brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            }
          }
        },
        deep: true  //深度监控
      }
    }
  }
</script>

<style scoped>

</style>
